<template>
  <div>
    <a-divider orientation='left'>待结算明细</a-divider>
    <f-table ref='settleDetailsList' v-if='settleList&&settleList.length>0' rowKey='orderDetailsId' :columns='settleDetailsColumns' style='padding-left:150px;width:80%' size='small' :dataSource='settleList' :showPagination='false' :showSetting='false' :multiple='true' :showMultipleBtn='false'>

    </f-table>
    <a-divider orientation='left'>结算信息</a-divider>
    <f-form ref='form' :action='api.payment' handlerName='settlePaymentSaveHandler' :form-key='this.formItem.paymentId' :file-ids='fileIds'>
      <!--      <f-form-item label='结算金额' type='number' name='amount' dataType='number' :value='formItem.amount' :max='formItem.amount' :precision='4' :required='true' :disabled='disabled' />-->
      <!--      <f-form-item label='结算金额' ref='settleAmount' type='select' name='amount' dataType='number'  :data='settleAmountList' valueKey='amount' label-key='amount' :required='true' :auto-load='false' />-->
      <f-form-item label='金额类型' v-show='settleType==2' type='radio' name='settleType' :required='true' dataType='number' :data='api.settle.settleType' :value.sync='formItem.settleType' />
      <f-form-item label='收款人' ref='saleMan' name='saleManId' type='select' :data='api.saleman.list' valueKey='saleManId' :value='formItem.saleManId' :required='true' label-key='saleManName' @change='saleManChange' :dropdown-render='true' @addItem='addSaleMan' :auto-load='false' />
      <f-form-item label='收款账户' ref='bank' type='select' name='bankId' :value='formItem.bankId' :data='api.salemanBank.list' valueKey='bankId' label-key='bankName,bankNo' :required='true' :params='queryParam' :auto-load='false' @addItem='addBank' :dropdown-render='true' :disabled='bankDisable'/>
      <f-form-item label='结算日期' type='date' name='amountDate' :required='true' :value='formItem.amountDate' />
      <f-form-item label='备注' name='remark' :value='formItem.remark' />
      <f-form-item label='附件' type='upload' name='jsImage' :value='formItem.jsImage' value-type='json' :file-max='50' @uploadSuccess='uploadSuccess' />
    </f-form>

    <a-divider orientation='left' v-if='paymentList&&paymentList.length>0'>结算记录</a-divider>
    <f-table ref='settle' style='padding-bottom: 50px' v-if='paymentList&&paymentList.length>0' rowKey='paymentId' :columns='settleColumns' :scroll='{x:true}' size='small' :dataSource='paymentList' :showPagination='false' :multiple='false'>
        <span slot='paymentState' slot-scope='text, record, index'>
            <a-tag color='#87d068' v-if='text==0'>未提交</a-tag>
             <a-tag color='#87d068' v-if='text==1'>审批中</a-tag>
            <a-tag color='#f50' v-if='text==2'>已结算</a-tag>
        </span>
    </f-table>
    <a-modal title='添加收款人' :visible='saleManModal' width='700px' @cancel='saleManCancel' @ok='saleManSubmit'>
      <f-form ref='saleManForm' :action='api.saleman' :form-key='this.saleManForm.saleManId'>
        <f-form-item label='姓名' name='saleManName' :value='saleManForm.saleManName' :required='true' />
        <f-form-item label='联系电话' name='linkTel' :value='saleManForm.linkTel' />
        <f-form-item label='银行名称' name='bankName' :required='true' :value='saleManForm.bankName' />
        <f-form-item label='银行卡号' name='bankNo' :required='true' :value='saleManForm.bankNo' />
        <f-form-item label='备注' name='remark' :value='saleManForm.remark' />
      </f-form>
    </a-modal>
    <a-modal title='添加收款人账户' :visible='bankModal' width='700px' @cancel='bankCancel' @ok='bankSubmit'>
      <f-form ref='bankForm' :action='api.salemanBank' :form-key='this.bankForm.bankId'>
        <f-form-item label='银行名称' name='bankName' :required='true' :value='bankForm.bankName' />
        <f-form-item label='银行卡号' name='bankNo' :required='true' :value='bankForm.bankNo' />
        <f-form-item label='备注' name='remark' :value='bankForm.remark' />
      </f-form>
    </a-modal>
  </div>
</template>
<script>

import api from "./../js/api"
import SalemanAdd from "@/views/module/business/saleman/saleman_add"

export default {
  name: "SettleForm",
  components: { SalemanAdd },
  data() {
    return {
      api: Object.assign(api, this.api),
      disabled: false,
      fileIds: [],//上传文件ID
      //列表初始化查询参数
      queryParam: {
        deptId: ""
      },
      settleAmountList: [],
      saleManModal: false,
      bankModal: false,
      saleManId:null,
      bankDisable: true,
      paymentList: [],
      settleList: [],
      settleType: 1,
      settleDetailsColumns: [
        {
          title: "商品名称",
          align: "left",
          width: "80px",
          dataIndex: "drugsName"
        },
        {
          title: "规格",
          align: "left",
          width: "80px",
          dataIndex: "drugsSpec"
        },
        {
          title: "数量",
          align: "left",
          width: "50px",
          dataIndex: "saleNum"
        },
        {
          title: "单价",
          align: "left",
          width: "80px",
          dataIndex: "salePrice"
        },
        {
          title: "销售金额",
          align: "left",
          width: "80px",
          dataIndex: "saleAmount"
        },

        {
          title: "应结金额1",
          align: "left",
          width: "90px",
          needTotal: true,
          dataIndex: "noSettleAmount"
        }, {
          title: "应结金额2",
          align: "left",
          width: "120px",
          needTotal: true,
          dataIndex: "noSettleAmount2"
        }, {
          title: "应结金额3",
          align: "left",
          width: "120px",
          needTotal: true,
          dataIndex: "noSettleAmount3"
        }
      ],
      settleColumns: [
        {
          title: "序号",
          width: "60px",
          align: "center",
          customRender: (text, record, index) => index + 1
        },
        {
          title: "单号",
          align: "center",
          width: "140px",
          dataIndex: "paymentNo"
        },
        {
          title: "收款银行",
          align: "center",
          ellipsis: true,
          width: "150px",
          dataIndex: "bankName"
        },
        {
          title: "收款人",
          align: "center",
          width: "120px",
          dataIndex: "saleManName"
        },
        {
          title: "收款账户",
          align: "center",
          width: "150px",
          ellipsis: true,
          dataIndex: "bankNo"
        },
        {
          title: "结算金额",
          align: "center",
          width: "120px",
          dataIndex: "amount"
        },
        {
          title: "申请日期",
          align: "center",
          width: "120px",
          dataIndex: "amountDate"
        },
        {
          title: "支付日期",
          align: "center",
          width: "120px",
          dataIndex: "payDate"
        },
        {
          title: "状态",
          align: "center",
          width: "120px",
          dataIndex: "paymentState",
          scopedSlots: { customRender: "paymentState" }
        }
      ],
      formItem: this.getFormItem(),
      saleManForm: {},
      bankForm: {}
    }
  },
  created() {
  },
  methods: {
    getFormItem() {
      return {
        settleId: "",
        deptId: "",
        bankId: null,
        selectIds: "",
        amount: 0,
        settleType: 1,
        amountDate: "",
        remark: ""
      }
    },
    setData(data) {
      if (data && data.deptId) {
        this.formItem.amount = parseFloat(data.settleAmount)
        if (data.settleAmount2 && data.settleAmount2 != 0) {
          this.formItem.amount2 = parseFloat(data.settleAmount2)
        }
        this.formItem.deptId = data.deptId
        this.formItem.orderDetailsId = data.orderDetailsId
        this.formItem.orderId = data.orderId
        this.$nextTick(() => {
          this.$refs["saleMan"].initData({ deptId: data.deptId })
          if (this.formItem.amount && this.formItem.amount != 0) {
            this.settleAmountList.push({ amount: this.formItem.amount })
          }
          if (this.formItem.amount2 && this.formItem.amount2 != 0) {
            this.settleAmountList.push({ amount: this.formItem.amount2 })
          }
        })
        //查询已结算明细
        this.http.get(this, {
          url: this.api.payment.listByOrderId,
          params: {
            orderId: data.orderId,
            orderDetailsId: data.orderDetailsId,
            parentId: data.parentId
          },
          success: function(me, data) {
            me.paymentList = data.paymentList
            me.settleList = data.settleList
            me.settleType = data.settleType
          }
        })
      }
    },
    //文件上传回调
    uploadSuccess(fileUrl, files, fileIds) {
      this.fileIds = fileIds
    },
    addSaleMan() {
      this.saleManModal = true
    },
    addBank() {
      this.bankModal = true
    },
    saleManSubmit() {
      this.$refs.saleManForm.submit({ deptId: this.formItem.deptId }, this.saleManCancel)
    },
    bankSubmit() {
      this.$refs.bankForm.submit({ deptId: this.formItem.deptId,saleManId:this.saleManId }, this.bankCancel)
    },
    saleManCancel() {
      this.saleManModal = false
      this.$refs["saleMan"].initData({ deptId: this.formItem.deptId })
    },
    bankCancel() {
      this.bankModal = false
      this.$refs["bank"].initData({ saleManId: this.saleManId })
    },
    //业务员切换
    saleManChange(value) {
      this.$refs.form.getForm().resetFields(["bankId"])
      this.bankForm.saleManId = value
      this.bankDisable=false;
      this.saleManId=value;
      this.$refs["bank"].initData({ saleManId: value })
    },
    handleSubmit() {
      let params = {
        orderDetailsId: this.formItem.orderDetailsId,
        orderId: this.formItem.orderId,
        amount: this.formItem.amount,
        deptId: this.formItem.deptId
      }
      let selectIds = this.$refs.settleDetailsList.getSelectedRowKey()
      if (selectIds == "") {
        this.$message.success("请选择结算明细")
        return false
      }
      if (this.formItem.settleType == 1) {
        let settleAmount = this.$refs.settleDetailsList.getSelectedTotal("noSettleAmount")
        params.settleType = 1
        params.amount = settleAmount

      }
      if (this.formItem.settleType == 2) {
        let settleAmount = this.$refs.settleDetailsList.getSelectedTotal("noSettleAmount2")
        params.settleType = 2
        params.amount = settleAmount
      }
      if (this.formItem.settleType == 3) {
        let settleAmount = this.$refs.settleDetailsList.getSelectedTotal("noSettleAmount3")
        params.settleType = 3
        params.amount = settleAmount
      }
      params.selectIds = selectIds.join(",")
      this.$refs["form"].submit(params, this.handleSuccess)
    },
    handleSuccess() {
      this.$emit("closeDrawer", false)
    }
  }
}
</script>
